<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>在线接口文档</title>
    <link rel="stylesheet" href="./static/layui/css/layui.css">

    <style type="text/css">
        .block {
            margin: 1%;
            padding: 1%;
            width: 46%;
        }
        .layui-input-block {
            margin-left: 170px;
        }
        .layui-form-label {
            width: 120px;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black"><a style="color: #fff;" href="/">在线接口文档</a></div>
    </div>

    <div class="layui-body" style="left: 0">
        <!-- 内容主体区域 -->
        <div style="padding: 15px; width: 80%;margin: 0 auto;">
            <div class="block" style="float:left; background-color: #92B8B1">
                <pre id="result">
                    {{.Result}}
                </pre>
            </div>

            <div class="block" style="float: right;background-color: #92B8B1">
                <form id="formId">

                </form>
            </div>
        </div>
    </div>


</div>
<script src="./static/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/layui/'
    }).use(['jquery', 'form' ], function(){
        const $ = layui.jquery
        const form = layui.form
        const code = layui.code

        // 格式化输出返回值
        let data = $('#result').html()
        const json = JSON.parse(data)

        data = JSON.stringify(json, null, 2)
        $('#result').html(data)

        // 根据返回json生成key的数组.体现结构
        const keyArr = getKeysByJson(json, "", '.')

        // 获取 该 url 的缓存
        const urlVal = {{.UrlStr}}
        $.getJSON('/api/resultCache?url='+ urlVal, function(d) {
            if(d.code != 200) {
                layer.msg('获取字段描述失败')
                return false
            }
            createForm(d.data)
        })

        // 循环 key 生成表单, 缓存 key 作为默认值
        function createForm(resultCache) {
            for(let i in keyArr) {
                const key = keyArr[i]

            }
            this.saveKey = saveKey
            keyArr.forEach(function(key) {
                let val = ''
                if(resultCache.hasOwnProperty(key)) val = resultCache[key]

                const html = '<div class="layui-form-item">\n' +
                    '                        <label class="layui-form-label">'+ key +'</label>\n' +
                    '                        <div class="layui-input-block">\n' +
                    '                            <input onblur="saveKey(\''+ key +'\', this.value)" type="text" name="'+ key +'" value="'+ val +'" class="layui-input">\n' +
                    '                        </div>\n' +
                    '                    </div>'
                $('#formId').append(html)
            })
        }

        // 保存数据
        function saveKey(key, val) {
            const url = '/api/resultSaveKey?url=' + urlVal + '&key=' + key + '&val=' + val
            $.getJSON(url, function(d) {
                if(d.code !== 200) {
                    layer.msg('保存失败')
                    return false
                }

                layer.msg('保存成功')
            })
        }

        // 根据 json 获取 key 数组
        function getKeysByJson(json, keyNow, join) {
            let keyArr = []
            join = join || '.'
            for(let key in json) {
                // 将 key 压入数组
                let keyInsert = key
                if(!!keyNow) {
                    keyInsert = keyNow + join + keyInsert
                }
                console.log(key, keyNow, keyInsert)

                keyArr.push(keyInsert)

                // 该 key 对应的 值 不是数组
                if(!Array.isArray(json[key]) && Object.prototype.toString.call(json[key]) !== "[object Object]") {
                    continue
                }

                // 该 key 对应的 值 是数组
                let jsonChild = json[key]
                if(jsonChild.hasOwnProperty(0)) {
                    jsonChild = jsonChild[0]
                    join = ':'
                } else {
                    join = '.'
                }
                let keyArrChild = getKeysByJson(jsonChild, keyInsert, join)
                keyArr = keyArr.concat(keyArrChild)
            }
            return keyArr
        }
    });
</script>
</body>
</html>